<!DOCTYPE html>
<html lang="en" class="js cssanimation csstransforms csstransforms3d csstransitions">
<head>
    <meta charset="UTF-8">
    <title>Circle</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/style7.css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet" type="text/css">
    <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
    <script type="text/javascript">
        // Don't use this code on your site
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-7243260-2']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>
<body>
<div class="container">

    <!-- Codrops top bar -->
    <div class="codrops-top">
        <a href="http://tympanus.net/Development/AnimatedResponsiveImageGrid/">
            <strong>« Previous Demo: </strong>Animated Responsive Image Grid
        </a>
                <span class="right">
                    <a href=" http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
        <div class="clr"></div>
    </div><!--/ Codrops top bar -->

    <header>

        <h1><strong>Circle</strong> Hover Effects</h1>
        <h2>Pretty hover effects on circles with CSS Transitions</h2>

        <nav class="codrops-demos">
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index.html">Demo 1</a>
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index2.html">Demo 2</a>
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index3.html">Demo 3</a>
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index4.html">Demo 4</a>
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index5.html">Demo 5</a>
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index6.html">Demo 6</a>
            <a class="current-demo" href="http://tympanus.net/Tutorials/CircleHoverEffects/index7.html">Demo 7</a>
        </nav>

        <div class="support-note"><!-- let's check browser support with modernizr -->
            <!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
            <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
            <span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
            <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
            <span class="note-ie">Sorry, only modern browsers.</span>
        </div>

    </header>

    <section class="main">

        <ul class="ch-grid">
            <li>
                <div class="ch-item">
                    <div class="ch-info">
                        <div class="ch-info-front ch-img-1"></div>
                        <div class="ch-info-back">
                            <h3>Mouse</h3>
                            <p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="ch-item">
                    <div class="ch-info">
                        <div class="ch-info-front ch-img-2"></div>
                        <div class="ch-info-back">
                            <h3>You</h3>
                            <p>by Zoe Ingram <a href="http://drbl.in/eCcV">View on Dribbble</a></p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="ch-item">
                    <div class="ch-info">
                        <div class="ch-info-front ch-img-3"></div>
                        <div class="ch-info-back">
                            <h3>Love</h3>
                            <p>by Eileen Tjan <a href="http://drbl.in/ewTL">View on Dribbble</a></p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script>
<script src="http://tympanus.net/codrops/wp-content/plugins/oiopub-direct/js.php?type=banner&amp;align=center&amp;zone=1"></script>


</body></html>